<!-- <template>
    <div style="width: 100%; height: 100%">
      <EchartsComponent></EchartsComponent>
    </div>
  </template>
  
  <script lang="ts">
  import EchartsComponent from '@/views/dashboard/LineChart.vue';
  export default {  
  name: 'ParentComponent',  
  components: {  
    EchartsComponent  
  }  
}  
  </script>
  <style lang="sass" scoped>
  </style> -->
<template>
  <el-row :gutter="20">
    <el-col :span="6">
      <!-- <div class="grid-content ep-bg-purple" /> -->
      <el-card shadow="always">
        <template #header>
          <div class="indicator-container">
            <b>OP10工站</b>
            <!-- 红色指示灯 -->
            <div v-if="redLight" class="indicator red"></div>
            <!-- 绿色指示灯 -->
            <div v-if="greenLight" class="indicator green"></div>
          </div>
        </template>
        <el-row>
          <el-col :span="24">
            <div>
              <el-input v-model="OP20BarCode" readonly="true" style="max-width: 600px" placeholder="Please input">
                <template #prepend>加工产品</template>
              </el-input>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <div class="flex gap-2">
              <span>加工：</span>
            </div>
          </el-col>
          <el-col :span="16">
            <el-tag type="primary" size="large">{{ OP20Allow }}</el-tag>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <div class="flex gap-2">
              <span>结果：</span>
            </div>
          </el-col>
          <el-col :span="16">
            <el-tag type="success" size="large">{{ OP20Result }}</el-tag>
          </el-col>
        </el-row>
      </el-card>
    </el-col>
    <el-col :span="6">
      <!-- <div class="grid-content ep-bg-purple" /> -->
      <el-card shadow="always">
        <template #header>
          <div class="indicator-container">
            <b>OP20工站</b>
            <!-- 红色指示灯 -->
            <div v-if="redLightOP20" class="indicator red"></div>
            <!-- 绿色指示灯 -->
            <div v-if="greenLightOP20" class="indicator green"></div>
          </div>
        </template>
        <el-row>
          <el-col :span="24">
            <div>
              <el-input readonly="true" style="max-width: 600px" placeholder="Please input">
                <template #prepend>当前订单</template>
              </el-input>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div>
              <el-input v-model="OP20BarCode" readonly="true" style="max-width: 600px" placeholder="Please input">
                <template #prepend>加工产品</template>
              </el-input>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div>
              <el-input  readonly="true" style="max-width: 600px" placeholder="Please input">
                <template #prepend>产品型号</template>
              </el-input>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <div class="flex gap-2">
              <span>加工：</span>
            </div>
          </el-col>
          <el-col :span="16">
            <el-tag type="primary" size="large">{{ OP20Allow }}</el-tag>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <div class="flex gap-2">
              <span>结果：</span>
            </div>
          </el-col>
          <el-col :span="16">
            <el-tag type="success" size="large">{{ OP20Result }}</el-tag>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div style="width: 100%;height: 100%">
              <EchartsComponent />

            </div>
          </el-col>
        </el-row>
      </el-card>
    </el-col>
    <el-col :span="6">
      <!-- <div class="grid-content ep-bg-purple" /> -->
      <el-card shadow="always">
        <template #header>
          <div class="indicator-container">
            <b>OP40工站</b>
            <!-- 红色指示灯 -->
            <div v-if="redLightOP40" class="indicator red"></div>
            <!-- 绿色指示灯 -->
            <div v-if="greenLightOP40" class="indicator green"></div>
          </div>
        </template>
        <el-row>
          <el-col :span="24">
            <div>
              <el-input  readonly="true" style="max-width: 600px" placeholder="Please input">
                <template #prepend>当前订单</template>
              </el-input>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div>
              <el-input v-model="OP20BarCode" readonly="true" style="max-width: 600px" placeholder="Please input">
                <template #prepend>加工产品</template>
              </el-input>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div>
              <el-input  readonly="true" style="max-width: 600px" placeholder="Please input">
                <template #prepend>产品型号</template>
              </el-input>
            </div>
          </el-col>
        </el-row>
        <el-row></el-row>
        <el-row>
          <el-col :span="8">
            <div class="flex gap-2">
              <span>加工：</span>
            </div>
          </el-col>
          <el-col :span="16">
            <el-tag type="primary" size="large">{{ OP40Allow }}</el-tag>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <div class="flex gap-2">
              <span>结果：</span>
            </div>
          </el-col>
          <el-col :span="16">
            <el-tag type="success" size="large">{{ OP20Result }}</el-tag>
          </el-col>
        </el-row>
      </el-card>
    </el-col>
    <el-col :span="6">
      <!-- <div class="grid-content ep-bg-purple" /> -->
      <el-card shadow="always">
        <template #header>
          <div class="indicator-container">
            <b>OP50工站</b>
            <!-- 红色指示灯 -->
            <div v-if="redLight" class="indicator red"></div>
            <!-- 绿色指示灯 -->
            <div v-if="greenLight" class="indicator green"></div>
          </div>
        </template>
        <el-row>
          <el-col :span="24">
            <div>
              <el-input v-model="OP20BarCode" readonly="true" style="max-width: 600px" placeholder="Please input">
                <template #prepend>加工产品</template>
              </el-input>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <div class="flex gap-2">
              <span>加工：</span>
            </div>
          </el-col>
          <el-col :span="16">
            <el-tag type="primary" size="large">{{ OP20Allow }}</el-tag>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <div class="flex gap-2">
              <span>结果：</span>
            </div>
          </el-col>
          <el-col :span="16">
            <el-tag type="success" size="large">{{ OP20Result }}</el-tag>
          </el-col>
        </el-row>
      </el-card>
    </el-col>
  </el-row>
</template>
<script lang="js" setup>
import cache from '@/plugins/cache'
import EchartsComponent from '@/views/dashboard/LineChart.vue';
const { proxy } = getCurrentInstance()
const redLightOP20 = ref(false)
const greenLightOP20 = ref(true)
const redLightOP40 = ref(false)
const greenLightOP40 = ref(true)
//产品条码OP20
const OP20BarCode = ref('')
//产品加工OP20
const OP20Allow = ref('')
const OP40Allow = ref('')
OP20BarCode.value = cache.local.get('OP20BarCode')
OP20Allow.value = cache.local.get('OP20Allow')
//产品加工结果OP20
const OP20Result = ref('')
OP20Allow.value = cache.local.get('OP20Result')

proxy.signalr.SR.on("OP20WatchDog", (data) => {
  if (data == '1') {
    redLightOP20.value = false;
    greenLightOP20.value = true;
  } else {
    greenLightOP20.value = false;
    redLightOP20.value = true;
  }
})
proxy.signalr.SR.on("OP40WatchDog", (data) => {
  if (data == '1') {
    redLightOP40.value = false;
    greenLightOP40.value = true;
  } else {
    greenLightOP40.value = false;
    redLightOP40.value = true;
  }
})
proxy.signalr.SR.on('OP20BarCode', (data) => {
  OP20BarCode.value = data;
  cache.local.set('OP20BarCode', data)

})
proxy.signalr.SR.on('OP20Allow', (data) => {
  OP20Allow.value = data;
  cache.local.set('OP20Allow', data)
})
proxy.signalr.SR.on('OP40Allow', (data) => {
  OP40Allow.value = data;
  cache.local.set('OP40Allow', data)
})
proxy.signalr.SR.on('OP20Result', (data) => {
  OP20Result.value = data;
  cache.local.set('OP20Result', data)
})
</script>
<style scoped>
.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.indicator-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.indicator {
  float: right;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  margin-right: 8px;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}
</style>